<template>
    <div class="postmanagerPages">
        <pagetitle type="2"></pagetitle>
        <el-card class="pageCard">
            <div class="postmanagerTopTip">
                <img src="@/assets/images/icon/teamhand.png" alt="" srcset="" class="gangweiTipimg" />
                <div>
                    <div class="topTip">团队的组织架构，方便您团队的管理和决策</div>
                    <div class="bottomTip">团队信息仅用于进行登记，不会泄露您的任何证件信息</div>
                </div>
            </div>
        </el-card>
        <div class="cont">
            <div class="title">岗位管理</div>
            <div class="center">
                <div class="left">
                    <el-input v-model="keyWords" class="input" placeholder="搜索岗位" clearable @input="getPostList(data.creationData.departmentId)">
                        <template #prefix>
                            <el-icon class="el-input__icon"><search /></el-icon>
                        </template>
                    </el-input>
                    <el-scrollbar class="leftscrollbar">
                        <el-tree :data="data.departmentData" ref="trees" :props="treeProps" highlight-current node-key="departmentId" :expand-on-click-node="false" trigger="click" @node-click="nodeClick">
                            <template #default="{ node, data }">
                                <div class="customtreenode">
                                    <span>{{ node.label }}</span>
                                    <el-dropdown class="btn" size="small" @command="handleCommand">
                                        <div class="btntext">···</div>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item :command="node">新增岗位</el-dropdown-item>
                                                <!-- <el-dropdown-item v-if="node.level >= 2" :command="{ fun: 'update', node }">修改</el-dropdown-item> -->
                                                <!-- <el-dropdown-item v-if="node.level >= 2" :command="{ fun: 'delete', node }">删除</el-dropdown-item> -->
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-tree>
                    </el-scrollbar>
                </div>
                <div class="right">
                    <div class="righttitle">
                        <div>
                            <div class="name">{{ userInfo.nickName }}</div>
                            <div class="nametip">您是主管理员(创建者), 拥有全部权力</div>
                        </div>
                        <sxnfbtn @click="addPositionPop" color="#23b14d">新增岗位</sxnfbtn>
                        <!-- <el-button type="primary" text bg @click="addPositionPop">新增岗位</el-button> -->
                    </div>
                    <div class="tableBox">
                        <el-table :data="data.postList" style="width: 100%" class="configurationtable" border>
                            <el-table-column prop="name" label="序号" width="50">
                                <template #default="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column label="岗位" prop="name" width="200"></el-table-column>
                            <el-table-column label="所属部门" prop="departmentName" width="200"></el-table-column>
                            <el-table-column label="岗位描述" prop="description"></el-table-column>
                            <el-table-column label="操作" width="190">
                                <template #default="data">
                                    <el-button type="primary" size="small" link @click="openPost(data.row, '1')">查看</el-button>
                                    <el-button type="primary" size="small" link @click="router.push(`/team/teammanagement/postauthority`)">权限</el-button>
                                    <el-button type="primary" size="small" link @click="openPost(data.row, '2')">编辑</el-button>
                                    <el-button type="danger" size="small" link @click="deletePost(data.row)">移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <pagination :totalNum="60"></pagination> -->
                    </div>
                </div>
            </div>
        </div>

        <el-drawer v-model="drawer" :show-close="false" modal-class="teamdrawer">
            <div class="drawerheader">
                <span>{{ data.drawerTitle }}</span>
                <el-icon class="teamdrawerclose" @click="drawer = false"><Close /></el-icon>
            </div>
            <div class="drawerbody">
                <div class="item">
                    <div class="itemname">岗位名称：</div>
                    <el-input v-model="data.creationData.name" placeholder="请输入岗位名称" />
                </div>
                <div class="item">
                    <div class="itemname">所属部门：</div>
                    <!-- <el-select v-model="data.creationData.name" class="itemselect" placeholder="请选择所属部门">
                        <el-option label="决策层" value="item.value" />
                    </el-select> -->
                    <el-cascader style="width: 100%" ref="elcascader_department" v-model="data.creationData.departmentId" :options="data.departmentData" :props="props1" />
                </div>
                <div class="item">
                    <div class="itemname">排序：</div>
                    <el-input v-model="data.creationData.seq" placeholder="请输入排序权重" />
                    <div class="itemtip">*该岗位在列表中的排序</div>
                </div>
                <div class="item">
                    <div class="itemname">岗位描述：</div>
                    <el-input v-model="data.creationData.description" :rows="6" resize="none" type="textarea" placeholder="岗位描述" />
                </div>
                <!-- <div class="item">
                    <div class="itemname">权限内容：</div>
                    <el-select v-model="data.creationData.limits" class="itemselect" placeholder="请选择权限内容">
                        <el-option label="无" value="item.value" />
                    </el-select>
                </div>
                <div class="item">
                    <div class="itemname">权限描述：</div>
                    <el-input v-model="data.creationData.description" :rows="6" resize="none" type="textarea" placeholder="权限描述" />
                </div> -->
            </div>
            <template #footer>
                <div class="drawerFooter">
                    <sxnfbtn @click="drawer = false">取消</sxnfbtn>
                    <sxnfbtn @click="onSubmitPost" :disabled="data.drawerTitle == '岗位详情' ? true : false">确定</sxnfbtn>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { departmentList, addPosition, updatePosition, deletePosition, getPosition } from "@/api/team";
import { ElMessage, ElMessageBox, ElTree } from "element-plus";

const trees: any = ref<InstanceType<typeof ElTree>>();
const router = useRouter();
const store = useStore();
const keyWords = ref("");
// 页面数据
const userInfo = computed((e: any) => {
    return store.getters.userInfo;
});
const data: any = reactive({
    departmentData: [],
    creationData: reactive({
        name: "",
        departmentId: "",
        departmentName: "",
        seq: 0,
        description: "",
        teamId: store.getters.mainTeamId,
        limits: "",
        positionId: "",
    }),
    postList: [],
    drawerTitle: "新增岗位",
});
// data.creationData =
// 获取部门列表
const treeProps = {
    label: "name",
};
const props1 = {
    checkStrictly: true,
    label: "name",
    value: "departmentId",
    emitPath: false,
};
const getDepartmentList = () => {
    departmentList(store.getters.mainTeamId, "").then((res: any) => {
        data.departmentData = res.data;
        if (data.departmentData.length > 0) {
            console.log(111);
            nextTick(() => {
                // setTimeout(() => {
                trees?.value.setCurrentKey(res.data[0].departmentId);
                // }, 300);
                getPostList(res.data[0].departmentId);
            });
            // if (data.departmentData[0].children.length > 0) {
            //     getPostList(data.departmentData[0].children[0].departmentId);
            // } else {
            //     getPostList(data.departmentData[0].departmentId);
            // }
        }
    });
};
getDepartmentList();
// 监听头部公司选择框数据变化
const selectCompany = computed({
    get: () => {
        return store.getters.mainTeamId;
    },
    set: (val) => {
        console.log(val);
    },
});
watch(
    selectCompany,
    (newVal, oldVal) => {
        if (oldVal) {
            getDepartmentList();
        }
    },
    { immediate: true, deep: true }
);
// 获取部门岗位列表
const getPostList = (id: number | string) => {
    getPosition({
        departmentId: id,
        teamId: store.getters.mainTeamId,
        keyWords: keyWords.value,
    }).then((res: any) => {
        data.postList = res.data;
    });
};

const elcascader_department: any = ref(null);
const onSubmitPost = () => {
    const postData = data.creationData;
    if (!postData.name) {
        ElMessage.error("岗位名称不能为空");
        return;
    } else if (!postData.departmentId) {
        ElMessage.error("请选择所属部门");
        return;
    }
    if (data.drawerTitle == "新增岗位") {
        onCreationPost(postData);
    } else {
        onUpdatePost(postData);
    }
};
// 新增岗位
const onCreationPost = (postData: any) => {
    // 获取选中的部门名称
    const departmentName = elcascader_department?.value.getCheckedNodes()[0].label;
    postData.departmentName = departmentName;
    addPosition(postData).then((res: any) => {
        ElMessage.success("添加成功");
        drawer.value = false;
        getPostList(postData.departmentId);
        // getDepartmentList();
    });
};
const onUpdatePost = (postData: any) => {
    updatePosition(postData).then((res: any) => {
        ElMessage.success("修改成功");
        drawer.value = false;
        getPostList(postData.departmentId);
    });
};
// 树点击事件
const nodeClick = (datas: any, none: any) => {
    // console.log(datas);
    keyWords.value = "";
    data.creationData.departmentId = datas.departmentId;
    data.creationData.departmentName = datas.name;
    getPostList(datas.departmentId);
};
// 删除岗位
const deletePost = (row: any) => {
    ElMessageBox.confirm("是否要删除该岗位?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deletePosition({
            id: row.positionId,
            teamId: store.getters.mainTeamId,
        }).then((res: any) => {
            ElMessage({
                message: "删除成功",
                type: "success",
            });
            getPostList(row.departmentId);
        });
    });
};
// 查看或编辑
const openPost = (row: any, type: string) => {
    data.creationData.name = row.name;
    data.creationData.departmentId = row.departmentId;
    data.creationData.description = row.description;
    data.creationData.seq = row.seq;
    data.creationData.limits = row.limits;
    data.creationData.positionId = row.positionId;
    if (type == "1") {
        data.drawerTitle = "岗位详情";
    } else {
        data.drawerTitle = "编辑岗位";
    }
    drawer.value = true;
};
const drawer = ref(false);
// 从部门列表新增
const handleCommand = (command: any) => {
    let datas = command.data;
    data.creationData.departmentId = datas.departmentId;
    data.creationData.departmentName = datas.name;
    drawer.value = true;
};
// 监听弹窗显示隐藏
watch(drawer, (val: boolean) => {
    if (!val) {
        const postData = data.creationData;
        postData.name = "";
        postData.departmentId = "";
        postData.description = "";
        postData.seq = 0;
        postData.limits = "";

        data.drawerTitle = "新增岗位";
    }
});
// 打开新增岗位弹窗
const addPositionPop = () => {
    try {
        let datas = trees?.value.getCurrentNode();
        data.creationData.departmentId = datas.departmentId;
        data.creationData.departmentName = datas.name;
        drawer.value = true;
    } catch (error) {
        ElMessage.error("请先添加部门");
    }
};
</script>
<style lang="scss" scoped>
.postmanagerPages {
    .pageCard {
        margin-bottom: 20px;
        .postmanagerTopTip {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .gangweiTipimg {
                width: 56px;
                height: 56px;
                margin-right: 25px;
            }
            .topTip {
                font-size: 16px;
                color: #333333;
                span {
                    color: #23b14d;
                    margin-left: 10px;
                    cursor: pointer;
                }
            }
            .bottomTip {
                font-size: 14px;
                color: #666666;
                margin-top: 10px;
            }
        }
    }
    .cont {
        // box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background: #ffffff;
        .title {
            padding: 20px;
            border-bottom: 1px solid #eeeeee;
            position: relative;
            &::before {
                content: "";
                position: absolute;
                width: 62px;
                height: 2px;
                background: #333333;
                left: 20px;
                bottom: 0;
            }
        }
        .center {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            .left {
                height: 765px;
                width: 320px;
                border-right: 1px solid #eeeeee;
                // padding: 15px 20px;
                .input {
                    margin: 15px 20px;
                    margin-bottom: 10px;
                    width: calc(100% - 40px);
                    .el-input__icon {
                        cursor: pointer;
                    }
                }
                .leftscrollbar {
                    height: calc(100% - 72px);
                    padding: 0 20px;
                }
                .customtreenode {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding-right: 10px;
                    &:hover {
                        .btn {
                            display: block;
                        }
                    }
                    .btn {
                        width: 22px;
                        height: 22px;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 22px;
                        color: #666666;
                        background: rgba(0, 0, 0, 0.1);
                        // display: none;
                        .btntext {
                            width: 22px;
                        }
                    }
                }
            }
            .right {
                width: calc(100% - 320px);
                .righttitle {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding: 20px;
                    padding-bottom: 30px;
                    .name {
                        color: #333333;
                        font-size: 16px;
                        margin-bottom: 5px;
                        font-weight: bold;
                    }
                    .nametip {
                        color: #666666;
                        font-size: 14px;
                    }
                }
                .tableBox {
                    padding: 0 20px;
                    padding-bottom: 20px;
                }
            }
        }
    }
}
.teamdrawer {
    .drawerheader {
        color: #333333;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 20px;
        border-bottom: 1px solid #eeeeee;
        .teamdrawerclose {
            cursor: pointer;
        }
    }
    .drawerbody {
        padding: 30px 20px;
        .item {
            margin-bottom: 30px;
            .itemname {
                color: #333333;
                font-size: 14px;
                margin-bottom: 10px;
            }
            .itemselect {
                width: 100%;
            }
            .itemtip {
                font-size: 12px;
                font-weight: 400;
                color: #999999;
                margin-top: 10px;
            }
        }
        .drawerimg {
            width: 378px;
            // height: 260px;
            margin-top: 100px;
        }
    }
    .drawerFooter {
        border-top: 1px solid #eeeeee;
        padding: 20px;
    }
}
</style>
<style>
.postmanagerPages .leftscrollbar .el-tree-node.is-current.is-focusable > .el-tree-node__content {
    color: #23b14d;
}
</style>
